import { thomeColor } from 'assets/color'
import styled from 'styled-components'
import border from 'utils/border'

export const TabBarContainer = border({
  component:styled.footer`
  height: .49rem;
  font-size: .12rem;
`,
  width: '1px 0 0 0',
  style: 'solid',
  color: '#ccc',
  radius: 0,
})







export const TabBarUl = styled.ul`
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-item: center;
  padding:0 0.1rem
`


export const TabBarLi = styled.li`
  width:18%

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    text-decoration: none;
    &.active{
      color: ${thomeColor}

    }
    i{
      align-self: center;
      margin-bottom: .02rem;
      font-size: 0.20rem
    }
    
  }
`